<template>
	<div>
	<HomeHeader></HomeHeader>
	<HomeSwiper :list="swiperList"></HomeSwiper>
	<HomeIcons :list="iconList"></HomeIcons>
	<HomeRecommend :recommendList="recommendList"></HomeRecommend>
	<HomeWeekEnd :weekendList="weekendList"></HomeWeekEnd>
	</div>
</template>
<script>
import HomeHeader from './components/header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'
import HomeWeekEnd from './components/weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	name:'Home',
	components:{
		HomeHeader,
		HomeSwiper,
		HomeIcons,
		HomeRecommend,
		HomeWeekEnd
	},
	data() {
		return{
			lastCity:'',
			swiperList:[],
			iconList:[],
			recommendList:[],
			weekendList:[]
		}
	},
	computed: {
		...mapState(['city'])
	},
	methods: {
		getHomeInfo(){
			axios.get('/api/index.json?city=' + this.city)
			.then(this.getHomeInfoSucc)
		},
		getHomeInfoSucc (res){
			res = res.data
			if(res.ret && res.data){
				const data = res.data
				this.swiperList = data.swiperList
				this.iconList = data.iconList
				this.recommendList = data.recommendList
				this.weekendList = data.weekendList
			}
		}
	},
	mounted() {
		this.lastCity =  this.city
		this.getHomeInfo()
	},
	activated () {
		if( this.lastCity !== this.city){
			this.getHomeInfo()
			this.lastCity = this.city
		}
	}
}
</script>
<style>
	
</style>